<template>
    <el-dialog :close-icon="true" :close-on-press-escape="false" :close-on-click-modal="false"
        style="padding: 40px 40px 50px 40px;background-color: #08163E !important;" class="text-[24px]"
        :destroy-on-close="true" width="704px" height="506px" v-model="dialogVisible" @close="close">

        <div class="text-header"><img src="@/assets/img/log-img/update-password-title-icon.png"
                class="w-[7px] h-[12px] mr-[19px]" />修改密码</div>
        <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef">
            <el-form-item prop="oldPassword" label-position="right" label="原密码" label-width="100px">
                <el-input auto-complete="new-password" show-password clearable v-model="passwordForm.oldPassword"
                    placeholder="请输入原密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="newPassword" label-position="right" label="新密码" label-width="100px">
                <el-input auto-complete="new-password" show-password clearable v-model="passwordForm.newPassword"
                    placeholder="可输入大小写字母、数字及特殊字符，至少8位">
                </el-input>
            </el-form-item>
            <el-form-item prop="newPassword1" label-position="right" label="确认新密码" label-width="100px">
                <el-input auto-complete="new-password" show-password clearable v-model="passwordForm.newPassword1"
                    placeholder="可输入大小写字母、数字及特殊字符，至少8位">
                </el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" class="submit-btn" @click="handleSubmit">保存</el-button>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { post } from '@/utils/request'
import { loginApi } from '@/api'
import { ElMessage } from 'element-plus'
import { removeUserInfo } from '@/utils/storage.ts'
// import { validatePassword } from '@/utils/validate.ts'
import { useRouter } from 'vue-router'
const router = useRouter()
const dialogVisible = ref(false)
const open = () => {
    dialogVisible.value = true
}
const close = () => {
    dialogVisible.value = false
}

const passwordForm = ref({
    oldPassword: '',
    newPassword: '',
    newPassword1: ''
})
const validatePassword = (rule, value, callback) => {
    // 验证密码
    const reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?]).{8,16}$/
    if (!reg.test(value)) {
        callback(new Error('密码必须包含字母、数字和特殊字符，长度在 8-16 位之间'))
    } else {
        callback()
    }
}


const passwordRules = {
    oldPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    newPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { validator: validatePassword, message: '密码必须包含字母、数字和特殊字符，长度在 8-16 位之间', trigger: 'blur' }
    ],
    newPassword1: [
        { required: true, message: '请输入密码', trigger: 'blur' },

    ]
}

const passwordFormRef = ref(null)
const handleSubmit = async () => {
    try {
        await passwordFormRef.value.validate()
        if (passwordForm.value.newPassword !== passwordForm.value.newPassword1) {
            ElMessage.error('两次密码不一致')
            return
        }
        const param = {
            oldPassword: passwordForm.value.oldPassword,
            newPassword: passwordForm.value.newPassword,
        }
        const res = await post(loginApi.updatePassword, param)
        console.log(res, 'handleSubmit')
        if (res.code === "0000") {
            ElMessage.success('修改成功')
            close()
            removeUserInfo()
            router.push('/login');
        }
    } catch (error) {
        return
    }

}


defineExpose({ open })
</script>
<style scoped lang="scss">
.submit-btn {
    @apply w-full h-[64px] flex justify-center items-center;
}

.text-header {
    display: flex;
    align-items: center;
    color: #FFFFFF;
    width: 100%;
    height: 50px;
    font-size: 24px;
    line-height: 24px;
    border-left: 4px solid #6191EC;
    margin-bottom: 40px;
    padding-left: 9px;
    position: relative;
}

.text-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    opacity: 0.2;
    /* 背景透明度50% */
    background-color: #6191EC;
}

:deep(.el-dialog__wrapper .el-dialog) {
    // background-color: #08163E;

}

.el-form-item {
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px 16px 16px 16px;
    margin-bottom: 40px;
}

:deep(.el-input__wrapper) {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    border: none !important;
}

:deep(.el-input__inner) {
    box-shadow: none !important;
    color: #fff;
    font-size: 18px;
}

:deep(.el-form-item__label) {
    justify-content: flex-start;
    color: #33FEFE;
    width: 90px;
}

:deep(.el-form-item) {
    height: 64px;
}

:deep(.el-form-item__error) {
    left: 12px;
}

// 解决el-input 回填账号时 背景无法更改问题
:deep(input:-internal-autofill-previewed,
    input:-internal-autofill-selected) {
    // -webkit-text-fill-color: #807c7c;
    transition: background-color 5000s ease-out 0.5s;
}
:deep(input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active) {
    transition-delay: 99999s;
    transition: color 99999s ease-out, background-color 99999s ease-out;
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
    // -webkit-text-fill-color: #807c7c;
}
</style>